<template>
  <div class="index-container">
    <div class="list-title">
      <div class="list-title-left">维修进度</div>
    </div>
    <div class="speed-body">
      <van-steps direction="vertical" :active="activeIndex"  :finish-icon="successIcon" :active-icon="activeIcon" >
        <van-step v-for="(item, index) in list" :key="index">
          <h3 :class="activeIndex > index? 'success' : '' ">{{item.name}}</h3>
          <p>{{ item.desc }}</p>
        </van-step>
      </van-steps>
      <!-- <div class="area" v-for="(item,index ) in detail.process" :key="index">
          <div :class="[item.finish_status === 1?'success':'',(detail.status+1) === item.id && item.finish_status !== 1?'being':'','head']">
            <div class="point" style="background-image: url('../../../static/succed.png');"></div>
            {{ item.name }}
          </div>
          <p class="tip">{{ item.desc }}</p>
      </div> -->
    </div>
    <div class="speedbtn" @click="goBack">确认</div>
  </div>
</template>
<script>
import { getSpeedInfo } from '@/api/home.js'
export default {
  data() {
    return {
      no: '',
      activeIndex: 0,
      successIcon: require('../../../static/succed.png'),
      activeIcon: require('../../../static/being.png'),
      list: [],
      detail: ''
    }
  },

  mounted(e) {
    this.no = this.$route.query.no
    this.getInfo()
  },

  methods: {
    getInfo() {
      let params = {
        no: this.no
      }
      getSpeedInfo(params).then((res) => {
        this.list = res.data.process
        for (let key in  res.data.process) {
          if(res.data.process[key]['finish_status'] == 1){
              this.activeIndex += 1
          }
        }
        this.detail = res.data;
      }).catch(() => { })
    },
    goBack() {
      this.$router.go(-1)
    },
  }
}
</script>

<style scpoed>
.index-container{
  padding: 25px 15px;
}
.list-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-title-left{
  border-left: 2px solid #a82025;
  padding-left: 12.5px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #191919;
  height: 18px;
  line-height: 18px;
}
.speedbtn{
  width: 250px;
  height: 40px;
  background: linear-gradient(135deg, #FF3737, #A82025);
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FEFEFE;
  text-align: center;
  line-height: 40px;
}
.speed-body{
  width: 345px;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  padding: 20px 17px;
  box-sizing: border-box;
  margin-top: 16px;
}
.success{
  color: #00C588;
}

</style>
<style>
[class*=van-hairline]::after{
  border: none;
}
h3{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 0;
  margin-top: 0;
}
p{
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #9197A1;
  margin-top: 8.5px;
}
.van-step__icon--active, .van-step__icon--finish, .van-step__title--active, .van-step__title--finish{
  font-size: 18px;
}
.van-step__title--active h3{
  color: #2A9DDF;
}
.van-step__circle{
  width: 9px;
  height: 9px;
}
</style>
